<template>
  <div ref="chart" style="width: 100%; height: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'AgePieChart',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: [
        {
          itemStyle: {
            color: '#6D7DF4'
          }
        },
        {
          itemStyle: {
            color: '#FFC107'
          }
        },
        {
          itemStyle: {
            color: '#00CF84'
          }
        },
        {
          itemStyle: {
            color: '#FF87B7'
          }
        },
        {
          itemStyle: {
            color: '#FF4A46'
          }
        }
      ]
    }
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize) // 窗口大小改变时重新绘制图表
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize) // 清理事件监听
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart
      this.myChart = echarts.init(chartDom) // 初始化ECharts实例

      const chartData = this.data

      // 配置项
      const option = {
        title: {
          text: '年龄数据占比',
          left: 'center',
          show: false
        },
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#6D7DF4', '#FFC107', '#00CF84', '#FF87B7', '#FF4A46'],
        legend: {
          orient: 'vertical', // 设置为垂直显示
          left: 'center',
          bottom: '0%',
          formatter(name) {
            let target
            chartData.forEach((item) => {
              if (item.name === name) {
                target = item
              }
            })
            let radio = '-'
            if (target.value !== 0) {
              radio = ((target.value / chartData.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(2) + '%'
            }
            return `{a| ${name} } {c| } {b| ${target.value}人 } {c| ${radio}}`
          },
          textStyle: {
            align: 'center',
            rich: {
              a: {
                width: 100,
                fontSize: 10
              },
              b: {
                fontSize: 10
              },
              c: {
                fontSize: 10
              }
            }
          },
          itemGap: 8, // 项目之间的间距
          itemWidth: 8, // 图例图标宽度
          itemHeight: 8, // 图例图标高度
          data: chartData.map(item => item.name),
          icon: 'circle' // 设置图例图标为圆点
        },
        series: [
          {
            name: '年龄占比',
            type: 'pie',
            radius: ['40%', '60%'], // 圆环图的内外半径
            center: ['50%', '35%'], // 圆环图的中心坐标
            top: '0%',
            avoidLabelOverlap: false,
            label: {
              show: false, // 不显示标签
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold',
                formatter(params) {
                  return params.name + '\n' + params.value + '人 '+ ((params.value / chartData.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(2) + '%'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: chartData,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            }
          }
        ]
      }

      // 使用配置项绘制图表
      this.myChart.setOption(option)
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize() // 窗口大小变化时自适应重新绘制
      }
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>
